<template>
  <div>
    <todo-input @change-content="changeContent" ref="todoInput"></todo-input>
    <todo-button @add-todo="addTodo"></todo-button>
  </div>
</template>

<script>
import TodoInput from "./TodoInput.vue";
import TodoButton from "./TodoButton.vue";
export default {
  name: "TodoHeader",
  components: {
    TodoInput,
    TodoButton,
  },
  data() {
    return {
      content: "",
    };
  },

  mounted() {},

  methods: {
    changeContent(content) {
      this.content = content;
      console.log(this.content);
    },
    addTodo() {
      this.$emit("addTodo", {
        id: new Date().getTime(),
        content: this.content,
        completed: true,
      });
      console.log(this.$refs.todoInput);
      this.$refs.todoInput.reset();
    },
  },
};
</script>

<style lang="scss" scoped>
</style>